<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta name="format-detection" content="telephone=no">
	<meta content="telephone=no" name="format-detection">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link href="<%=basePath %>resources/assets/stylesheets/main.css" rel="stylesheet" type="text/css" />
	<link href="<%=basePath %>resources/css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen">
	<link href="<%=basePath %>resources/css/bootstrap.css" rel="stylesheet" media="screen">
	<title>个人信息</title>
</head>
<body>
	<div class="html buy" id="J_html">
		<p class="top"><img src="<%=basePath %>resources/assets/img/icon.jpeg" class="top-i"></p>
		<p class="til">个人信息</p>
		<div class="form" role="form">
			<div class="line">
				<p class="ado">账号:</p>
				<p class="linput">
					<input type="text" name="mobile" id="mobile" value="${userProfile.mobile }" disabled="disabled" class="J_setdata ctrol" data-key="mobile">
				</p>
			</div>
			
			<div class="line">
				<p class="ado">姓名:</p>
				<p class="linput">
					<input type="text" class="J_setdata ctrol" data-key="name" name="name" id="name" value="${userProfile.name }">
				</p>
			</div>
			<div class="line">
				<p class="ado">性别:</p>
				<p class="linput linput-select">
					<select class="select ctrol" id="J_province" data-key="sex" name="sex" >
						<option value="">请选择</option>
						<option value="1" <c:if test="${userProfile.sex == 1 }">selected=selected</c:if> >男</option>
						<option value="2" <c:if test="${userProfile.sex == 2 }">selected=selected</c:if> >女</option>
					</select>
				</p>
			</div>
			<div class="line date">
				<p class="ado">生日:</p>
				<p class="linput">
					<input type="text"  class="J_setdata ctrol addDate" data-key="birthday" name="birthday" id="birthday" value="<fmt:formatDate value="${userProfile.birthday }" pattern="yyyy-MM-dd"  />">
				</p>
			</div>
			<div class="line">
				<p class="ado">血型:${userProfile.bloodType }</p>
				<p class="linput linput-select">
					<select class="select ctrol" id="J_province" data-key="bloodType" name="bloodType" >
						<option value="">请选择</option>
						<option value="A型" <c:if test="${userProfile.bloodType == 'A型' }">selected=selected</c:if> >A型</option>
						<option value="B型" <c:if test="${userProfile.bloodType == 'B型' }">selected=selected</c:if> >B型</option>
						<option value="O型" <c:if test="${userProfile.bloodType == 'O型' }">selected=selected</c:if> >O型</option>
						<option value="AB型" <c:if test="${userProfile.bloodType == 'AB型' }">selected=selected</c:if> >AB型</option>
						<option value="其他" <c:if test="${userProfile.bloodType == '其他' }">selected=selected</c:if> >其他</option>
					</select>
				</p>
			</div>
			<p class="btnline"><button class="btn" id="J_btn">保存</button></p>
		</div>
	</div>
	<script language="javascript" type="text/javascript" src="<%=basePath %>resources/assets/javascript/jquery-2.1.4.min.js"></script>
	<script language="javascript" type="text/javascript" src="<%=basePath %>resources/assets/javascript/func.js"></script>
	<script type="text/javascript" src="<%=basePath %>resources/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
	<script type="text/javascript">
	$.fn.datetimepicker.dates['zh-CN'] = {
				days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
				daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
				daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
				months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
				monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
				today: "今天",
				suffix: [],
				meridiem: ["上午", "下午"]
		};
		$('.addDate').datetimepicker({
	        language:  'zh-CN',
	        weekStart: 1,
	        todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			minView: 2,
			forceParse: 0,
			format: 'yyyy-mm-dd'
	    });
		
	</script>
	<script type="text/javascript">
        var wtype = window.innerWidth<1000?'wap':'pc';
		function errormsg(elm,msg){
            if(wtype=='wap'){
                CUES.tip({"msg":msg,"type":"danger"});
            }else{
                var dom = $('<span class="errormsg">'+msg+'</span>');
                elm.addClass('ctrol_error');
                elm.after(dom);
                setTimeout(function(){
                    dom.fadeOut();
                    setTimeout(function(){
                        dom.remove();
                    },1000);
                    elm.removeClass('ctrol_error');
                },2500);
            };
        };
		$(function(){
			var data = {},
				isajax = false;

			$('.ctrol').blur(function(){
				var self = $(this),
					v = self.val().trim(),
					k = self.attr('data-key');

				if(k == 'phone'){
					if(!/^[1][0-9]{10}$/ig.test(v)){
						self.val('')
						return;
					};
				};
				data[k] = v;
			});

            $('#J_btn').click(function(){
                if(isajax) return;
                $(".linput>.ctrol ").each(function (index,line) {
                    data[$(line).data('key')] = $(line).val();
                })

                isajax = true;
                $('#J_btn').html('正在提交···');
                data['superAccessId'] = "${user.accessId}";
                data['source'] = 5;
                $.ajax({
                	    type : "put" ,
                    url: "<%=basePath %>users/profile?superAccessId="+data['superAccessId'],
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    dataType: "json",
                    success: function(res){
                        if(res.status==0){
                        		alert("保存成功");
                            window.location.reload();
                        }else {
                            errormsg($("#mobile"),res.message);
                        }
                    },
                    complete:function(){
                        isajax = false;
                        $('#J_btn').html('提交')
                    }
                });
            });
		});
	</script>
</body>
</html>
